<template>
  <div class="mainsss"> 
        <div class="masks"  v-if="maskShow"></div>
    <div class="Fj" v-if="commodityShow">
      <div class="FJtop">
       <div class="FjtopInfo">
          <div class="Fjtext">
           平台编码：ZXZ89090商品信息
          </div>
           <div class="wrong" @click="closeCommodity">
            <a-icon type="close" />
          </div>
       </div>
      </div>
      <div class="Fjmain">
         <div class="FjTitle">
           <div class="FjImg">
             <img src="../../../../assets/image/buyer/SourcingGoods.png" alt="">
           </div>
           <div class="FjName">
             寻源商品： 燃油滤清器/ZXBDSJFBS7
           </div>
         </div>
      <div class="FjInfo">
           <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
         <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
   </div>
    <div class="Specifications">规格：</div>
   <div class="FjInfo" style="background:rgb(249, 251, 255)">
    
           <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
         <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
             <div class="everyInfo">
          <div class="front">
          商品名称：
           </div>
            <div class="after">
            博士燃油滤清器
            </div>
           </div>
   </div>
      <p class="Specifications">图片:</p>
     <div class="imgInfo" style="margin-top:-15px">
          <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
     <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
            <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
   </div>
  </div>
  </div>  
    <div class="Fj" v-if="viewShow">
      <div class="FJtop">
       <div class="FjtopInfo">
          <div class="Fjtext">
           燃油滤清器-ZXZJK8909089
          </div>
           <div class="wrong" @click="close">
            <a-icon type="close" />
          </div>
       </div>
      </div>
       <div class="Fjmain">
              <p class="remarks">备注内容：</p>
       <div class="reMarkinfo">
         备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注 备注
       </div>
        <p class="remarkIMg">补充图片</p>
     <div class="imgInfo">
          <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
     <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
            <div class="everyImg">
          </div>
           <div class="everyImg">
          </div>
       </div>
       </div>
    </div>
    
   <div v-if="type==0">
     <a-row type="flex" class="table-title">
      <a-col
        :span="8"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
        商品名称/平台编码
      </a-col>
      <a-col :span="7" class="textOverflow"> 价格（含税/含运费） </a-col>
      <a-col :span="7" class="textOverflow"> 供应商 </a-col>
      <a-col :span="2" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfos">
      <div class="everyTables">
        <div class="tablesInfo">
        <div class="indexs">
           <div class="left">
                <div class="index">1</div>
          <div class="names">发动机大修</div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
           </div>
        <div class="right">
                 <div class="budget">
            <span class="codeText">预算金额: </span>
            <span class="budgetMoney">￥550.00</span>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
              <div class="infoView" @click="enclosures()">
               查看
             </div>
          </div>
        </div>
        </div>
          <div class="everyTableInfo">
              <div class="check">
                    <a-checkbox @change="onChange">

               </a-checkbox>
              </div>
         <div class="codess">
        <div class="codes">
           <span>10年专业发动机大修</span>
           <div class="codeImg" @click="goCommodity">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="repair">
              SD010001
          </div>
         </div>
        <div class="rates">
            <div class="allRate">
              <div class="rateTop">
              <div class="rateNum"> 199.99</div>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
            </div>
            <div class="rateBottom">
              <div>价格有效期： </div>
              <div>2020 / 2 / 23</div>
            </div>
            </div>
          </div>
          <div class="validitys">
             <div class="leftTop">
               <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div> 
             </div>
            <div class="add">上海市宝山区 会山镇</div>
       
          </div>
          <div class="operation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>企业信息</span>
          </div>
    </div>
       </div>
    </div>
       </div>
   <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright">
         <a-button>确认核价</a-button>
        </div>
  </div>
   </div>
   <div v-if="type==1">
     <a-row type="flex" class="table-title">
      <a-col
        :span="6"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
       商品名称/平台编码
      </a-col>
            <a-col :span="4" class="textOverflow">要求规格相似度 </a-col>
      <a-col :span="6" class="textOverflow"> 价格（含税/含运费） </a-col>
     <a-col :span="6" class="textOverflow">供应商 </a-col>
      <a-col :span="2" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfos">
      <div class="everyTables">
        <div class="tablesInfo">
        <div class="indexs">
           <div class="left">
                <div class="index">1</div>
          <div class="names">发动机大修</div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
           </div>
        <div class="right">
                 <div class="budget">
            <span class="codeText">预算金额: </span>
            <span class="budgetMoney">￥550.00</span>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
              <div class="infoView" @click="enclosures()">
               查看
             </div>
          </div>
        </div>
        </div>
          <div class="everyTableInfo">
              <div class="check">
                    <a-checkbox @change="onChange">

               </a-checkbox>
              </div>
         <div class="typeOnecodess">
        <div class="codes">
           <span>宝马认证原厂米其林8星轮胎 </span>
           <div class="codeImg" @click="goCommodity">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="repair">
              SD010001
          </div>
         </div>
         <div class="similar">
           8/6
         </div>
        <div class="typeoneRates">
            <div class="allRate">
              <div class="rateTop">
              <div class="rateNum"> 199.99</div>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
            </div>
            <div class="rateBottom">
              <div>价格有效期： </div>
              <div>2020 / 2 / 23</div>
            </div>
            </div>
          </div>
          <div class="typeOnevaliditys">
             <div class="leftTop">
               <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div> 
             </div>
            <div class="add">上海市宝山区 会山镇</div>
       
          </div>
          <div class="typeOneoperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>企业信息</span>
          </div>
    </div>
       </div>
    </div>
       </div>
   <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright">
         <a-button>确认核价</a-button>
        </div>
  </div>
   </div>
   <div v-if="type==2">
     <a-row type="flex" class="table-title">
      <a-col
        :span="5"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
       平台编码
      </a-col>
            <a-col :span="3" class="textOverflow">品质品牌 </a-col>
      <a-col :span="5" class="textOverflow"> 价格（含税/含运费） </a-col>
       <a-col :span="4" class="textOverflow">施工费 </a-col>
     <a-col :span="5" class="textOverflow">供应商 </a-col>
      <a-col :span="2" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfos">
      <div class="everyTables">
        <div class="tablesInfo">
     <div class="indexss">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
              <div class="infoView" @click="enclosures()">
               查看
             </div>
          </div>
        </div>
          <div class="everyTableInfo">
              <div class="check">
                    <a-checkbox @change="onChange">

               </a-checkbox>
              </div>
         <div class="typeTwocodes">
        <div class="codes">
           <span>SD010001 </span>
           <div class="codeImg" @click="goCommodity">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
         </div>
         <div class="typeTwosimilar">
          品牌 | 博士
         </div>
        <div class="typeTwoRates">
            <div class="allRate">
              <div class="rateTop">
              <div class="rateNum"> 199.99</div>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
            </div>
            <div class="rateBottom">
              <div>价格有效期： </div>
              <div>2020 / 2 / 23</div>
            </div>
            </div>
          </div>
          <div class="typeTwoconstruction">
                60.00
          </div>
          <div class="typeTwovaliditys">
             <div class="leftTop">
               <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div> 
             </div>
            <div class="add">上海市宝山区 会山镇</div>
       
          </div>
          <div class="typeTwooperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>企业信息</span>
          </div>
    </div>
       </div>
    </div>
       </div>
   <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright">
         <a-button>确认核价</a-button>
        </div>
  </div>
   </div>
     <div v-if="type==3">
     <a-row type="flex" class="table-title">
      <a-col
        :span="5"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
       商品名称/平台编码
      </a-col>
            <a-col :span="4" class="textOverflow">要求规格相似度 </a-col>
      <a-col :span="5" class="textOverflow"> 价格（含税/含运费） </a-col>
       <a-col :span="3" class="textOverflow">施工费 </a-col>
     <a-col :span="5" class="textOverflow">供应商 </a-col>
      <a-col :span="2" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfos">
      <div class="everyTables">
        <div class="tablesInfo">
     <div class="indexss">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
              <div class="infoView" @click="enclosures()">
               查看
             </div>
          </div>
        </div>
          <div class="everyTableInfo">
              <div class="check">
                    <a-checkbox @change="onChange">

               </a-checkbox>
              </div>
         <div class="typeThreecodes">
        <div class="codes">
           <span>SD010001 </span>
           <div class="codeImg" @click="goCommodity">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
         </div>
         <div class="typeTwosimilar">
          8/6
         </div>
        <div class="typeTwoRates">
            <div class="allRate">
              <div class="rateTop">
              <div class="rateNum"> 199.99</div>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
            </div>
            <div class="rateBottom">
              <div>价格有效期： </div>
              <div>2020 / 2 / 23</div>
            </div>
            </div>
          </div>
          <div class="typeTwoconstruction">
                60.00
          </div>
          <div class="typeTwovaliditys">
             <div class="leftTop">
               <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div> 
             </div>
            <div class="add">上海市宝山区 会山镇</div>
       
          </div>
          <div class="typeTwooperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>企业信息</span>
          </div>
    </div>
       </div>
    </div>
       </div>
   <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright">
         <a-button>确认核价</a-button>
        </div>
  </div>
   </div>
    </div>
</template>

<script>
export default {
  data(){
    return{
     viewShow:false,
     commodityShow:false,
     maskShow:false,
     type:0
    }
  },
  created(){
   console.log('created');
  },
  methods:{
    goCommodity(){ 
       this.commodityShow=true
       this.maskShow=true
    },
    closeCommodity(){
   this.commodityShow=false
    this.maskShow=false
    },
    enclosures(){
      this.viewShow=true
       this.maskShow=true
    },
    close(){
        this.viewShow=false
         this.maskShow=false
    }
  }
};
</script>

<style lang='less' scoped>
html,
body {
  width: 100%;
}
.mainsss{
  width: 100%;
  height: 100%;
    background-color: rgb(237, 239, 243);
}
.masks {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100;
}
   .FJtop{
     width: 100%;
     height: 15;
     border-bottom: 1px solid rgb(242, 242, 242);
     .FjtopInfo{
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-around;
       .Fjtext{
         margin-left: 25px;
         width: 90%;
         font-size: 16px;
         font-weight: bold;
         line-height: 54px;
       }
       .wrong{
         margin-right: 24px;
         width: 10%;
         width: 16px;
         height: 16px;
         img{
           width: 100%;
           height: 100%;
         }
       }
     }
   }
.Fj{
  position: fixed;
  top: 20%;
  width: 70%;
  height: 70%;
 
  background-color: white;
   z-index: 110;  
   border-radius: 8px;
   .Fjmain{
     width: 100%;
     height: 85%;
      overflow-y: auto;
   }
   .FjTitle{
     margin: 24px;
    //  width: 100%;
     display: flex;
     align-items: center;
     .FjImg{
        width: 24px;
        height: 24px;
        img{
          width: 100%;
          height: 100%;
        }
     }
     .FjName{
       margin-left: 12px;
       font-size: 14px;
       font-weight: bold;
     }
   }
   .Specifications{
     margin: 16px 30px 10px;
     font-size: 12px;
      color:rgb(174, 179, 185)
   }
   .FjInfo{
     width: 95%;
     display: flex;
     margin: auto;
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
     .everyInfo{
         padding-left: 30px;
       width: 30%;
       margin-top: 16px;
       display: flex;
       font-size: 12px;
       .front{
         color:rgb(174, 179, 185)
       }
     }
   }
     .remarks{
       margin: 24px;
     }
     .reMarkinfo{
       background-color: rgb(248, 249, 250);
       margin: auto;
       width: 90%;
     }
     .remarkIMg{
           margin: 24px 24px 0px;
     }
     .imgInfo{
       width: 90%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .everyImg{
          margin: 16px 16px 16px 0px;
          width: 120px;
          height: 120px;
          border: 1px solid rgb(237, 239, 243);
        }
     }
}
.table-title {
  width: 100%;
  margin-top: 10px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  background-color: rgb(248, 249, 250);
  .textOverflow {
    font-weight: bold;
  }
}
.tableInfos{
  width: 98%;
  height: calc(100vh - 200px);
 padding-bottom: 20px;
   margin: auto;
   margin-top: 8px;
  .everyTables {
    width: 100%;
    background-color: skyblue;
    border-bottom: 1px solid rgb(237, 239, 243);
    .tablesInfo{
         width: 100%;
          display: flex;
         flex-direction: column;
         background-color: white;
             .top {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: space-between;
      position: relative;
       background-color: white;
      .left {
        width: 70%;
        display: flex;
        align-items: center;
        .name {
          line-height: 48px;
          font-size: 14px;
          font-weight: bold;
        }
        .zhiding {
          margin-left: 4px;
          width: 33px;
          height: 18px;
          border: 1px solid blue;
          color: blue;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
        }
           .img{
          margin-left: 8px;
        }
        .add {
          margin-left: 15px;
          width: 73px;
          height: 14px;
          list-style: 48px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      .right {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        .Ch {
          color: rgb(162, 167, 175);
        }
        .price {
          width: 35%;
          font-size: 12px;
          border-right: 1px solid gray;
        }
        .total {
          margin-left: 16px;
        }
      }
      .rightImg {
        width: 70px;
        height: 60px;
        position: absolute;
        right: 0px;
        top: 30%;
        margin-top: -26px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .imgText {
        width: 70px;
        height: 60px;
        color: white;
        position: absolute;
        right: -25px;
        top: 20%;
        z-index: 100;
        font-size: 15px;
      }
    }
             .indexss {
         width: 100%;
         margin: auto;
          height: 48px;
          background-color: rgb(248, 249, 250);
      display: flex;
      .left{
         width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
        .codeText {
        color: rgb(165, 171, 178);
      }
      .index {
        margin-left: 16px;
        width: 20px;
        height: 20px;
        border: 1px dashed black;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .names {
        font-weight: bold;
        margin-left: 16px;
      }
      .code {
        height: 15px;
        line-height: 15px;
        width: 220px;
        margin-left: 20px;
        border-right: 1px solid black;
      }
      .number {
        width: 100px;
        height: 15px;
        line-height: 15px;
        margin-left: 16px;
        border-right: 1px solid black;
      }
      .quality {
        margin-left: 15px;
      }
      .overdueImg{
          margin-left: 10px;
      }
      }
    
      .additional{
        align-self: center;
          width: 10%;
          margin-right: 16px;
          display: flex;
          .infoView{
            color: blue;
            cursor: pointer;
          }
      }
    }
             .indexs {
         width: 100%;
         margin: auto;
          height: 48px;
          background-color: rgb(248, 249, 250);
      display: flex;
      .left{
         width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      }
      .codeText {
        color: rgb(165, 171, 178);
      }
         .index {
        margin-left: 16px;
        width: 20px;
        height: 20px;
        border: 1px solid black;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .names {
        font-weight: bold;
        margin-left: 16px;
      }
      .number {
        width: 100px;
        height: 15px;
        line-height: 15px;
        margin-left: 16px;
      }
      .right{
          margin-right: -30px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 35%;
          .budget{
              width: 50%;
              .budgetMoney{
                  font-size: 18px;
                  font-weight: 400;
              }
          }
      }
      .additional{
        align-self: center;
          width: 40%;
          margin-right: 16px;
          display: flex;
          .infoView{
            color: blue;
            cursor: pointer;
          }
      }
    }
    }
    
    .everyTableInfo{
      width: 100%;
      height: 64px;
      border-bottom: 1px solid  rgb(248, 249, 250);
      display: flex;
      align-items: center;
      .check{
          margin-left: 10px;
      }
      .typeThreecodes{
              width: 18%;
        font-size: 12px;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
      }
         .typeTwocodes{
            width: 16%;
        font-size: 12px;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
      }
      .typeOnecodess{
            width: 23%;
        font-size: 12px;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
      }
        .codes{
            width: 90%;
            display: flex;
            
        }
        .codeImg{
          margin-left: 8px;
          width: 16px;
          height: 16px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .repair{
            margin-top: 7px;
            font-size: 12px;
       color: rgb(116, 124, 136);
        }
      .codess{
        width: 27%;
        font-size: 12px;
        margin-left: 16px;
        display: flex;
        flex-direction: column;

      }
      .typeTwosimilar{
        width: 12%;
      }
      .similar{
        width: 3%;
        
      }
 
         .allRate{
          width: 100%;
          height: 90%;
          margin: auto;
       display: flex;
        align-items: center;
        flex-wrap: wrap;
        }
        .rateTop{
          width: 100%;
            display: flex;
            .rateNum{
          font-size: 16px;
          font-weight: bold;
        }
        .rateImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
          border: 1px dashed rgb(116, 124, 136);
        }
        img{
          width: 90%;
          height: 90%;
         margin-bottom: 6px;
         margin-left: 1px;

        }
        .rateText{
          margin-left: 11px;
          width: 70px;
          display: flex;
          justify-content: space-between;
          border: 1px solid rgb(239, 241, 244);
          .SL{
            width: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-right: 1px solid  rgb(239, 241, 244);
             color: rgb(116, 124, 136);
          }
          .percentage{
            font-weight: bold;
          }
        }
        }
        .rateBottom{
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          color: rgb(188, 192, 197  );
        }
           .typeoneRates{
        width: 20%;
        height: 100%;
        margin-left: 110px;
      }
           .typeTwoRates{
        width: 22%;
        height: 100%;
      }
        .rates{
        width: 26%;
        height: 100%;
      
        .allRate{
          width: 100%;
          height: 90%;
          margin: auto;
       display: flex;
        align-items: center;
        flex-wrap: wrap;
        }
        .rateTop{
          width: 100%;
            display: flex;
            .rateNum{
          font-size: 16px;
          font-weight: bold;
        }
        .rateImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
          border: 1px dashed rgb(116, 124, 136);
        }
        img{
          width: 90%;
          height: 90%;
         margin-bottom: 6px;
         margin-left: 1px;

        }
        .rateText{
          margin-left: 11px;
          width: 70px;
          display: flex;
          justify-content: space-between;
          border: 1px solid rgb(239, 241, 244);
          .SL{
            width: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-right: 1px solid  rgb(239, 241, 244);
             color: rgb(116, 124, 136);
          }
          .percentage{
            font-weight: bold;
          }
        }
        }
        .rateBottom{
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          color: rgb(188, 192, 197  );
        }
      }
              .leftTop{
             display: flex;
             justify-content: space-around;
             .zhiding {
          margin-left: 4px;
          width: 33px;
          height: 18px;
          border: 1px solid blue;
          color: blue;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
        }
           }
           .add{
             margin-top: 5px;
             text-align: center;
           }
           .typeTwoconstruction{
             width: 10%;
             font-size: 14px;
             color: #202D40;
             font-family: DINAlternate, DINAlternate-Bold;
             font-weight: 700;
           }
           .typeTwovaliditys{
              width: 20%;
          font-size: 12px;
           }
      .typeOnevaliditys{
          width: 20%;
          font-size: 12px;
      }
      .validitys{
        width: 20%;
        font-size: 12px;
   
      }
      .typeTwooperation{
        margin-left: 60px;
      cursor: pointer;
        
      }
      .typeOneoperation{
        cursor: pointer;
        margin-left: 100px;
      }
      .operation{
        cursor: pointer;
        margin-left: 140px;
      }
    }
  }
}
.footers {
  width: 100%;
  height: 80px;
  display: flex;
      justify-content: space-between;
  position: absolute;
  background: white;
  bottom: 0px;
  left: 0px;
  .allBottomleft{
    width: 70%;
    height: 100%;
    margin-left: 15px;
    display: flex;
    .everyLeft{
        width: 25%;
        height: 100%;
        display: flex;
        // background-color: red;
        align-items: center;
    }
    .buttomImg{
      margin-bottom: 10px;
      width: 16px;
      height: 16px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .paginationBefore{
      font-size: 12px;
      margin-left: 8px;
        color: rgb(116, 124, 136);
    }
  }
  .allBottomright{
 width: 128px;
 height: 100%;

 button{
  width: 128px;
  height: 100%;
 font-size: 14px;
 color: white;
  background-color:#4F7AFD;
 }
  }
}
</style>